<template>
    <!-- @submit.prevent 指令绑定了一个事件监听器，当表单被提交时
    ，submitForm 函数将被调用;
    由于 base-button 没有 type="submit"，点击它不会直接触发表单的提交事件。然而，在 Vue 中，
    当你在表单元素上绑定 @submit 事件时，点击表单内的任何按钮（即使它们不是提交类型）
    都会触发表单的提交事件，只要这些按钮位于表单内。 -->
   <form @submit.prevent = "submitForm">
      <div class = "form-control">
        <label for="email">Your E-mail</label>
        <input type = "email" id="email" 
        v-model.trim="email" />
      </div>
      <!----------------------------------------------------- 
       v-model.trim="message" 是 Vue.js 的一个指令，用于实现文本区域与 Vue 
       实例中的 message 数据属性之间的双向数据绑定。v-model.trim 特别地去除了输入值前后的空白字符。
       for="message" 属性将此标签与 id 为 "message" 的表单控件相关联。当用户点击标签时，
       浏览器会自动将焦点转移到相关的表单控件上。 
       ------------------------------------------------------->
      <div class = "form-control">
        <label for="message">Message</label>
        <textarea rows="5" id="message" v-model.trim = "message"></textarea>
      </div>
      <p class="errors" v-if="!formIsValid">
        Please enter a valid email and no empty message
      </p>
      <div class = "actions">
        <base-button>Send Message</base-button>
      </div>
   </form>
</template>

<script>
export default{
  data()
  {
    return{
      email:'',
      message:'',
      formIsValid:true,
    }
  },
  methods:{
    //在提交表单中, 我现在要进行验证, 如果数据有效, 
    //则创建一个新消息或确保以某种方式创建一个新消息｡
    /*
     
    这个方法首先将 formIsValid 设为 true。
    接着检查 email 和 message 是否为空或者 email 是否包含 @ 符号。
    如果验证失败，将 formIsValid 设为 false 并退出方法。
    如果验证通过，则使用 Vuex 的 $store.dispatch 方法派发一个 ContactCoach action，
    并传递必要的数据作为 payload。
    最后，使用 Vue Router 的 $router.replace 方法导航到 /coaches 页面。
    */
    submitForm()
    {
      this.formIsValid = true;
      if(this.email ==='' || !this.email.includes('@') ||
      this.message ==='')
      {
        this.formIsValid = false;
        return;
      }
      //执行store/requests/actions中的 ContactCoach方法
      /*
      this.$route.params.id: 这里的 this.$route 是 Vue Router 提供的一个属性，
      它包含了当前路由的信息。params 属性是一个对象，用于存储动态路由参数。
      如果你的路由配置中有一个路径像 /coaches/:id，
      那么当用户访问类似 /coaches/123 的URL时，this.$route.params.id 就会被设置为 "123"。
      因此，coachId: this.$route.params.id 表示将当前路由中的 id 参数赋值给 coachId，
      这样在联系教练时就知道了要联系的是哪个具体的教练。
      */
      this.$store.dispatch('requests/ContactCoach',
        {
          email:this.email,
          message:this.message,
          coachId:this.$route.params.id
        });
        this.$router.replace('/coaches');
    }
    //console.log();

  }
}
</script>


<style scoped>
form {
  margin: 1rem;
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 1rem;
}

.form-control {
  margin: 0.5rem 0;
}

label {
  font-weight: bold;
  margin-bottom: 0.5rem;
  display: block;
}

input,
textarea {
  display: block;
  width: 100%;
  font: inherit;
  border: 1px solid #ccc;
  padding: 0.15rem;
}

input:focus,
textarea:focus {
  border-color: #3d008d;
  background-color: #faf6ff;
  outline: none;
}

.errors {
  font-weight: bold;
  color: red;
}

.actions {
  text-align: center;
}
</style>